export default function movable(node) {
  let moving = false
  let x, y, left, top

  // Note: 发送自定义事件
  function fire(type, option) {
    node.dispatchEvent(new CustomEvent(type, option))
  }

  function handleMove(e) {
    if (moving) {
      node.style.left = (e.clientX - x + left) + 'px'
      node.style.top = (e.clientY - y + top) + 'px'

      // Note: 发送 moving
      fire('moving', {
        detail: { x: e.clientX - x + left, y: e.clientY - y + top }
      })
    }
  }

  function startMove(e) {
    moving = true

    x = e.clientX
    y = e.clientY
    left = parseInt(node.style.left) || 0
    top = parseInt(node.style.top) || 0

    // Note: 发送 movestart
    fire('movestart', { detail: { x: left, y: top } })
  }

  function endMove() {
    moving = false;

    // Note: 发送 moveend
    fire('moveend')
  }

  window.addEventListener('mousemove', handleMove)
  window.addEventListener('mouseup', endMove)
  node.addEventListener('mousedown', startMove)

  return {
    destroy() {
      window.removeEventListener('mousemove', handleMove)
      window.removeEventListener('mouseup', endMove)
      node.removeEventListener('mousedown', startMove)
    }
  }
}
